{% extends "service_log/sl_base.html" %}
{% block require_javascript %}
require(['unit_choose']);
{% endblock require_javascript %}

{% load i18n %}

{% block head_title %}{% trans "Choose Unit" %}{% endblock %}

{% block body %}

{% if not split_sites %}
  <div class="row">
    <div class="col-md-12">
      <div class="box">
        <div class="box-header">
          <i class="fa fa-cube" aria-hidden="true"></i>
          <h3 class="box-title">
            {% trans "Choose a Unit to View Faults for" %}
          </h3>
          <p>
            {% trans "Click a button to view faults for one of the units below." %}
          </p>
        </div>
        <div class="box-body unit-btns">
          {% for type, units in unit_types%}
            <div class="row">
              <div class="col-sm-12">
                <h4 class="header-spacer">
                  {{ type.0 }}
                  {% blocktrans with unit_type=type.0 asvar title_hidden %}Click to show {{ unit_type }} units{% endblocktrans %}
                  {% blocktrans with unit_type=type.0 asvar title_shown %}Click to hide {{ unit_type }} units{% endblocktrans %}
                  <a role="button" data-toggle="collapse" data-target="#collapse-{{ site.0 }}-{{ forloop.counter }}"
                    title="{% if type.1 %}{{ title_hidden }}{% else %}{{ title_shown }}{% endif %}"
                    data-title-shown="{{ title_shown }}"
                    data-title-hidden="{{ title_hidden }}"
                  >
                    <i class="fa fa-fw {% if type.1 %}fa-caret-right{% else %}fa-caret-down{% endif %}"></i>
                  </a>
                </h4>
                <div id="collapse-{{ site.0 }}-{{ forloop.counter }}" class="collapse {% if not type.1 %}in{% endif %}">
                  {% for unit in units %}
                    <a class="btn btn-default btn-flat"
                      href="{% url 'fault_list_by_unit' unit_number=unit.unit__number %}"
                    >
                      {{unit.unit__name}}
                    </a>
                  {% endfor %}
                </div>
              </div>
            </div>
          {% endfor %}
        </div>
        <div class="box-footer"></div>
      </div>
    </div>
  </div>
{% else %}
  <div class="row">
    <div class="col-md-12">
      <h4>
        <i class="fa fa-cube" aria-hidden="true"></i>
        {% trans "Choose a Unit to View Faults for" %}
      </h4>
      <p>
        {% trans "Click a button to view service events for one of the units below." %}
      </p>
    </div>
  </div>
  <div class="row equal-cols">
    {% for site, types in unit_types.items %}
      <div class="col-md-{{ split_by }}">
        <div class="box">
          <div class="box-header">
            <h3 class="box-title">{% if site.1 == 'zzzNonezzz' %}Other{% else %}{{ site.1 }}{% endif %}</h3>
          </div>
          <div class="box-body unit-btns">
            {% for type, units in types %}
              <div class="row">
                <div class="col-sm-12">
                    <h4 class="header-spacer">
                      {{ type.0 }}
                      {% blocktrans with unit_type=type.0 asvar title_hidden %}Click to show {{ unit_type }} units{% endblocktrans %}
                      {% blocktrans with unit_type=type.0 asvar title_shown %}Click to hide {{ unit_type }} units{% endblocktrans %}
                      <a role="button" data-toggle="collapse" data-target="#collapse-{{ site.0 }}-{{ forloop.counter }}"
                        title="{% if type.1 %}{{ title_hidden }}{% else %}{{ title_shown }}{% endif %}"
                        data-title-shown="{{ title_shown }}"
                        data-title-hidden="{{ title_hidden }}"
                      >
                        <i class="fa fa-fw {% if type.1 %}fa-caret-right{% else %}fa-caret-down{% endif %}"></i>
                      </a>
                    </h4>
                    <div id="collapse-{{ site.0 }}-{{ forloop.counter }}" class="collapse {% if not type.1 %}in{% endif %}">
                      {% for unit in units %}
                        <a class="btn btn-default btn-flat"
                          href="{% url 'fault_list_by_unit' unit_number=unit.unit__number %}"
                        >
                          {{unit.unit__name}}
                        </a>
                      {% endfor %}
                    </div>
                </div>
              </div>
            {% endfor %}
          </div>
          <div class="box-footer"></div>
        </div>
      </div>

    {% endfor %}
  </div>
{% endif %}
{% endblock %}
